<template>
  <ContenWrap>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="公函管理" name="officialletter">
        <Officialletter />
      </el-tab-pane>
      <el-tab-pane label="公函查阅" name="effectOfficial">
        <EffectOfficial />
      </el-tab-pane>
      <!-- <el-tab-pane label="无效公函" name="invalidOfficial">
        <InvalidOfficial />
      </el-tab-pane>
      <el-tab-pane label="公函审批" name="approveOfficial">
        <ApproveOfficial />
      </el-tab-pane> -->
    </el-tabs>
  </ContenWrap>
</template>

<script lang="ts" setup>
import Officialletter from './index.vue'
import EffectOfficial from './effectOfficial.vue'
import InvalidOfficial from './invalidOfficial.vue'
import ApproveOfficial from './approveOfficial.vue'
import { ref } from 'vue'

const activeName = ref('officialletter')

const handleClick = (tab, event) => {
  activeName.value = tab.props.name
}
</script>

<style scoped lang="scss">
.first{
  line-height:25px;
  font-size:18px;
  color:#8a8a8a;
  display:flex;
  :deep(.el-icon){
    margin-top:5px !important
  }
}
.demo-tabs > .el-tabs__content {
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.left{
  margin-left:12px
}
.second{
  padding:15px 20px;
  display:flex;
  margin-top:10px;
  padding:10px
}
.logo{
  height:80px;
  width:80px
}
.main{
  margin-left:30px;
  width:calc(100% - 110px)
}
.m-top{
  display: flex;
  justify-content: space-between;
}
.m-tleft{
  display:flex
}
.gender{
  height:20px;
  width:20px;
  margin:3px 8px 0 8px
}
.age{
  color:#8a8a8a;
  line-height:26px
}
.tag1{
  padding:5px 10px;
  color:#4341ff;  
  border:1px solid #4341ff;
  margin-top: 10px;
}
.tag2{
  padding:5px  10px;
  color:#dc806f;
  border:1px solid #dc806f;
  margin-left:10px;
  margin-top: 10px;
}
.tag3{
  padding:5px  10px;
  color:#787878;
  margin-top: 10px;
  margin-left:10px;
  border:1px solid #787878
}
.name{
  font-size:20px;
  font-weight:bold
}
.m-bottom{
  margin:20px 0;
}
:deep(.el-descriptions__label){
  font-size:16px;
  color:#8a8a8a
}
:deep(.el-descriptions__content){
  font-size:16px;
  color:#333
}
.third{
  background:#fff;
  margin-top:10px;
  padding:15px
}
:deep(.el-tabs__item){
  padding:0 30px !important;
}
:deep(.el-tabs__nav-wrap){
  background:#fff;
  padding : 10px
}
:deep(.el-tabs){
  width: 100%;
}
</style>
